<template>
  <div style="padding: 10px">
    <div class="swiper">
      
    </div>
    <div class="goodInfo">
      <div class="goodInfo-title">{{goodDetail.title}}</div>
      <p>
        市场价:
        <span>¥{{goodDetail.market_price}}</span>销售价
        <em>¥ {{goodDetail.sell_price}}</em>
      </p>
      <div class="count">
        <span>购买数量</span>
        <van-stepper
          v-model="value"
          input-width="40px"
          button-size="32px"
          min="1"
          :max="goodDetail.stock_quantity"
        />
      </div>
      <div class="btns">
        <van-button type="info" >立即购买</van-button>
        <van-button type="danger" @click="setCarArr({id:$route.params.id,count:value,price:goodDetail.sell_price})">加入购物车</van-button>
      </div>
    </div>
    <div class="goodParams">
      <div class="title">商品参数</div>
      <div class="body">
        <p>商品货号: {{goodDetail.goods_no}}</p>
        <p>库存情况: {{goodDetail.stock_quantity}}件</p>
        <p>上架时间: {{goodDetail.add_time}}</p>
      </div>
      <div class="btns">
        <van-button size="large" plain type="info">图文介绍</van-button>
        <van-button size="large" plain type="danger">商品评论</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  data() {
    return {
      goodDetail: {},
      goodImgArr: [],
      styleInfo: {
        width: "200px",
        height: "200px",
        display: "block",
        margin: "auto"
      },
      value: 1
    };
  },
  methods: {
    ...mapMutations(['setCarArr']),
    async getGoodDetail() {
      const {data: res} = await this.$http(
        "/api/goods/getinfo/" + this.$route.params.id
      );
      console.log(res);
      if (res.status != 0) return this.$toast("请求服务器失败");
      this.goodDetail = res.message[0];
    },
    async getGoodImgArr() {
      const {data: res} = await this.$http(
        "/api/getthumimages/" + this.$route.params.id
      );
      this.goodImgArr = res.message;
    }
  },
  created() {
    this.getGoodDetail();
    this.getGoodImgArr();
  }
};
</script>

<style lang='less' scoped>
.swiper {
  height: 230px;
  border:1px solid #ccc;
  border-radius: 3px;
}
.goodInfo {
  margin-top: 10px;
  padding: 15px;
  border-radius: 3px;
  border:1px solid #ccc;
  .goodInfo-title {
    border-bottom: 1px solid #ccc;
  }
  p {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #8f8f94;
    span {
      text-decoration: line-through;
      margin: 0 10px;
    }
    em {
      font-weight: 700;
      font-size: 16px;
      color: red;
      font-style: normal;
    }
  }
  .count {
    padding: 10px;
    span {
      font-size: 14px;
      color: #8f8f94;
    }
    .van-stepper {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
  .btns {
    .van-button {
      margin: 3px 3px;
      height: 33px;
      line-height: 33px;
    }
  }
}
.goodParams {
  margin-top: 10px;
  padding: 15px;
  border-radius: 3px;
  border:1px solid #ccc;
  .title {
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .body {
    border-bottom: 1px solid #ccc;
    padding: 15px;
    p {
      font-size: 14px;
      margin: 10px 0;
      color: #8f8f94;
    }
  }
  .btns {
      margin-top: 10px;
    .van-button {
      height: 39px;
      line-height: 39px;
      border-radius: 5px;
      margin: 5px 0;
    }
  }
}
</style>